import React, { PureComponent } from 'react';
import { connect } from 'dva';
import numeral from 'numeral';
import moment from 'moment';
import AppSmsDashboard from './AppSmsDashboard';
import AppSmsWeekly from './AppSmsWeekly';
import AppSmsReceiveWeekly from './AppSmsReceiveWeekly';
import TodayDashboard from './TodayDashboard';
import AppTotalUsers from './AppTotalUsers';

@connect(({ dashboard, loading }) => ({
  dashboard,
  loading: loading.effects['dashboard/fetch'],
}))
class Dashboard extends PureComponent {
  state = {
    showDate: '',
  };

  componentDidMount() {
    const { dispatch } = this.props;
    const { showDate } = this.state;
    dispatch({ type: 'dashboard/fetch', payload: { size: 7, showDate } });
  }

  appUserCountDateHandle = e => {
    this.setState({ showDate: this.formatMoment(e.showDate) });
    const { dispatch } = this.props;
    dispatch({
      type: 'dashboard/fetch',
      payload: { size: 7, showDate: this.formatMoment(e.showDate) },
    });
  };

  numeralCount = count => numeral(count).format('0,0');

  formatMoment = value => (value ? moment(value).format('YYYY-MM-DD') : '');

  render() {
    const {
      dashboard: {
        smsChartData,
        appChartData,
        smsFailureRatio,
        todaySmsVo,
        appSmsLoginList,
        smsReceiveSuccessChartData,
        smsReceiveFailureRatio,
      },
      loading,
    } = this.props;
    const { showDate } = this.state;
    const value = appChartData && appChartData[0] && appChartData[0].date;
    const realShowDate = showDate || value;
    return (
      <div>
        <TodayDashboard todaySmsVo={todaySmsVo} loading={loading} />
        <AppTotalUsers
          appChartData={appChartData}
          callback={this.appUserCountDateHandle}
          showDate={realShowDate}
        />
        {/* <div style={{ padding: '10px' }} /> */}
        <AppSmsDashboard appSmsLoginList={appSmsLoginList} showDate={realShowDate} />
        <AppSmsWeekly smsChartData={smsChartData} smsFailureRatio={smsFailureRatio} />
        <AppSmsReceiveWeekly
          smsReceiveSuccessChartData={smsReceiveSuccessChartData}
          smsReceiveFailureRatio={smsReceiveFailureRatio}
        />
      </div>
    );
  }
}

export default Dashboard;
